<template>
  <div class="tabControl">
    <div class="item" v-for="(item,index) in titles" :key="index" :class="{active: currentIndex == index}" @click="itemClick(index)">
      <span>{{ item }}</span>
    </div>
  </div>
</template>

<script scoped>
export default {
   name: 'TabControl',
   props: {
     titles: {
       type: Array,
       default: []
     }
   },
   data() {
       return {
         currentIndex: 0
       }
   },
   methods: {
     itemClick: function (index) {
       //改变curentIndex的值
       this.currentIndex = index;
       //向父级发出事件
       this.$emit('itemClick', index)

     }
   }
}
</script>

<style lang='less'>
  .tabControl {
    display: flex;
    line-height: 0.8rem;
    font-size: .3rem;
    background-color: #fff;
    .item {
      flex: 1;
      text-align: center;
    }
    .active span{
      padding: 5px;
      color: @color-high-text;
      border-bottom: .04rem solid @color-high-text;
    }
  }
</style>
